<template>
    <div class="banner">
        <div class="w">
            <!-- 学车流程 -->
            <div class="menu-container">
                <p class="menu-title">学车流程</p>
                <ul class="menu-list">
                    <li v-for="item  in menuList ">
                        <img class="item_img" :src="item.icon" alt="">
                        <div class="t">
                            <a :href=item.url>{{item.title1}}</a>
                            <p>{{ item.title2 }}</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 轮播图区域 -->
        <!-- 这里暂时不选用swiper 轮播图  -->
        <el-carousel arrow="none" height="380px" :interval="5000" loop circular>
            <el-carousel-item v-for="(item, index) in imgList" :key="index">
                <a target="_blank" :href=item.url>
                    <img class="img" :src=item.imgUrl alt="">

                </a>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
    export default{
        data (){
            return {
                imgList: [
                    {
                        imgUrl: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_download.png',
                        url: "https://www.jiakaobaodian.com/download"
                    },
                    {
                        imgUrl: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_new1.jpeg',
                        url: "https://www.mucang.cn/company/honor/"
                    },
                    {
                        imgUrl: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaolian.jpg',
                        url: "https://www.mucang.cn/jiaolianbaodian/?from=jxrz-topbanner"
                    },
                    {
                        imgUrl: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaxiaobang.png',
                        url: "https://saas-shop.jiakaobaodian.com/runtu/cooperate.html"
                    },
                    
                ],
          
            
            menuList: [
                {
                    title1: "科目一",
                    title2: "2024新题库",
                    url: "https://www.jiakaobaodian.com/mnks/kemu1/car.html",
                    icon: "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/967c5f51b9995b3cea6ac917ccebbd10.png"
                },
                {
                    title1: "科目二",
                    title2: "精选视频，详解考点",
                    url: "https://www.jiakaobaodian.com/mnks/kemu2/car.html",
                    icon: "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/5061edda4ba913bd8f1ca5bdaee8d1d7.png"
                },
                {
                    title1: "科目三",
                    title2: "全方位讲解，攻克难点",
                    url: "https://www.jiakaobaodian.com/mnks/kemu3/car.html",
                    icon: "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/967c5f51b9995b3cea6ac917ccebbd10.png"
                },
                {
                    title1: "科目四",
                    title2: "2024新题库",
                    url: "https://www.jiakaobaodian.com/mnks/kemu4/car.html",
                    icon: "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/967c5f51b9995b3cea6ac917ccebbd10.png"
                },
            ]
            }
        }
    }
</script>


<style  lang="scss"  scoped>
.banner {
    width: 100%;
    height: 380px;
    z-index: 1;

    //background-color: palegoldenrod;
    .w {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        z-index: 3;
        
        

        .menu-container {
            position: absolute;
            z-index: 1000;
            top: 20px;
            left: 0;
            width: 280px;
            height: 333px;
            padding: 0 20px;
            background-color: rgba(255, 255, 255, .9);

            .menu-title {
                line-height: 50px;
                font-size: 20px;
                border-bottom: 1px dotted #ddd;
                text-align: center;


            }

            .menu-list {
                li {
                    display: flex;
                    margin-top: 18px;
                    margin-bottom: 18px;

                    .item_img {
                        margin-right: 15px;
                        width: 42px;
                        height: 42px;
                    }

                    .t {
                        a {
                            color: #37B5F8;
                            font-size: 16px;
                            
                        }

                        p {
                            margin-top: 5px;
                            color: #666;
                        }
                    }
                }
            }

        }

    }


    .img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        z-index: 2;
    }

    ::v-deep .el-carousel__indicators {
        transform: translateX(-50%) translateY(-50%);


    }




}
</style>